<template>
	<view class="main-content">
		<u-form :model="form" id="form-container">
			<u-form-item label="排产编号" label-width=150>
				<u-input v-model="form.planNo" placeholder="请输入排产编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="工段编号" label-width=150>
				<u-input v-model="form.sectionNo" placeholder="请输入工段编号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="上传者工号" label-width=150>
				<u-input v-model="form.uploadJobNumber" placeholder="请输入上传者工号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="处理者工号" label-width=150>
				<u-input v-model="form.delJobNumber" placeholder="请输入处理人工号" border clearable></u-input>
			</u-form-item>
			<u-form-item label="处理状态" label-width=150>
				<u-radio-group v-model="form.status" @change="radioChange" >
					<u-radio shape="square" 
							 v-for="(item, index) in statusList" 
							 :name="item.name" 
							 :key="index">
							 {{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="checkBtn">
				<u-button type="success" size="medium" @click="getErrorInfo">查询</u-button>
			</u-form-item>
		</u-form>
		<view class="table-content">
			<view class="hintInfo" v-if="pullDown">————下拉获取信息————</view>
			<view v-else class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
					<view class="list-item">
						<view>工段编号</view>
						<view>{{item.sectionNo}}</view>	
					</view>
					<view class="list-item">
						<view>工单编号</view>
						<view>{{item.planNo?item.planNo:''}}</view>	
					</view>
					<view class="list-item">
						<view>品号</view>
						<view>{{item.technologyNoAi?item.technologyNoAi:''}}</view>	
					</view>
					<view class="list-item">
						<text>问题类型</text>
						<text>{{item.abnormalType}}</text>
					</view>
					<view class="list-item">
						<text>异常报警ID</text>
						<text>{{item.abnormalId}}</text>
					</view>
					<view class="list-item">
						<view>异常警报名称</view>
						<view>{{item.abnormalName}}</view>
					</view>
					<view class="list-item">
						<view>异常信息上传者的工号</view>
						<view>{{item.uploadJobNumber}}</view>
					</view>
					<view class="list-item">
						<view>异常信息上传的工位ID</view>
						<view>{{item.stationId}}</view>
					</view>
					<view class="list-item">
						<view>异常信息上传时间</view>
						<view>{{item.createTime}}</view>
					</view>
					<view class="list-item">
						<view>工位标识</view>
						<view>{{item.stationIdentifying?item.stationIdentifying:''}}</view>
					</view>
					<view class="list-item">
						<view>处理人的工号</view>
						<view>{{item.dealJobNumber == null ? '' : item.dealJobNumber}}</view>
					</view>
					<view class="list-item">
						<view>处理时间</view>
						<view>{{item.updateTime == null ? '' : item.updateTime}}</view>
					</view>
					<view class="list-item">
						<text>处理状态</text>
						<view>{{item.status == 0 ? '未处理' : '已处理'}}</view>
					</view>
					<view class="list-item">
						<text>异常原因</text>
						<view style="max-width: 468rpx">{{item.content?item.content:''}}</view>
					</view>
					<view class="flex u-row-center">
						<!-- 去掉按钮，只允许工段长 2022/5/5-->
						<!-- <u-button size="medium" type="warning" @click="dealFunc(item.abnormalId)">处理异常</u-button> -->
						<u-button size="medium" type="warning" @click="modify(item)">修改异常原因</u-button>
					</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-popup v-model="modifyFlag" mode="center" width="80%" border-radius="14">
			<u-form :model="modifyForm" ref="uForm">
				<u-form-item label="异常描述" prop="name" :label-width="160">
					<u-input 
					disabled
					v-model="modifyForm.content" 
					maxlength="50" 
					placeholder="请输入异常描述(最多50个字)"/>
				</u-form-item>
				<u-form-item label="责任部门" prop="name" :label-width="160">
					<u-input v-model="modifyForm.dealWorkCenter" @click="showDepartments = true" placeholder="请选择责任部门" disabled />
					<u-picker mode="selector" v-model="showDepartments"  :default-selector="[defaultIndex]" :range="departments" @confirm="selectDepartment"></u-picker>
				</u-form-item>
				<u-form-item label="责任人反馈异常原因" prop="name" :label-width="160">
					<u-input 
					v-model="modifyForm.dealContent" 
					maxlength="50" 
					placeholder="请输入异常原因(最多50个字)"/>
				</u-form-item>
				<view class="u-flex u-row-around">
					<u-button @click="cancel">取消</u-button>
					<u-button size="medium" type="success" @click="submit">提交</u-button>
				</view>
			</u-form>
		</u-popup>
	</view>
</template>

<script>
	import { abnormalQEProcessPage,updAbnormal } from '../../utils/index.js'
	export default {
		data() {
			return {
				form: {
					planNo: '',							//排产编号
					sectionNo: '',						//工段编号
					uploadJobNumber: '',				//问题上传者的工号
					delJobNumber: '',					//处理人的工号
					status: '未处理',					//处理状态标志位
					page: 1,							//页码
					limit: 100							//每页多少条记录
				},
				// 单选框的选择信息
				statusList: [
					{	
						name: '已处理'
					},
					{
						name: '未处理'
					}
				],
				departments: ['数控车间','焊接车间','喷涂车间','结构总装车间','医疗车间','油烟机车架','EMS车间','华海车间','物流部','供应商','总经办','销售服务部','研发部','供应商质量部','QC部','设备工程部','钣金工程部','钣金工艺部','新产品验证部','电装工艺部','电装QC部','电装计划部','PMC部','质量管理部','人力资源部','财务部','采购策略部','产品成本中心'],	//责任部门
				showDepartments: false,
				defaultIndex: 0,
				records: [],							//异常报警信息表单
				pullDown: true,							//使能当前页面的下拉刷新功能
				modifyForm: {},
				modifyFlag: false,
				type: 'textarea',
				height: 140,
				autoHeight: true,
			}
		},
		methods: {
			selectDepartment(val){
				console.log('责任部门',val[0])
				let index = val[0]
				this.defaultIndex = index
				this.defaultIdx = 0
				this.form.upProcess = ''
				this.modifyForm.dealWorkCenter = this.departments[index]
			},
			modify(item){
				this.modifyForm = Object.assign({},item)
				this.modifyFlag = true
			},
			async submit(){
				if(!this.modifyForm.content) return this.$refs.uTips.show({
						title: '请输入异常原因',
						type: 'warning',
						duration: '2000'
					})
				if(!this.modifyForm.dealWorkCenter) return this.$refs.uTips.show({
						title: '请输入责任部门',
						type: 'warning',
						duration: '2000'
					})
				if(!this.modifyForm.dealContent) return this.$refs.uTips.show({
						title: '请输入异常原因',
						type: 'warning',
						duration: '2000'
					})
				const query = {
					content: this.modifyForm.content,
					dealWorkCenter:this.modifyForm.dealWorkCenter,
					dealContent:this.modifyForm.dealContent,
					abnormalId: this.modifyForm.abnormalId
				}
				const { data } = await  updAbnormal(query)
				const errMsg = data.msg
				if(data.code == '1'){
					this.modifyFlag = false
					this.getErrorInfo()
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			cancel(){
				this.modifyFlag = false
			},
			// 处理状态切换函数
			radioChange(name) {
				this.form.status = name
			},
			//获取相关处理信息列表
			async getErrorInfo() {
				const query = Object.assign({},this.form)
				query.status = (query.status == "未处理") ? "0" : "1"
				const { data } = await  abnormalQEProcessPage(query)
				const errMsg = data.msg
				this.records = data.data.records
				this.pullDown = false
				if(this.records.length == 0) {
					this.$refs.uTips.show({
						title: '查询信息不存在，请核实！',
						type: 'warning',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				}
			},
			// 下拉刷新,即调用查询按钮绑定的函数
			onPullDownRefresh() {
				this.getErrorInfo()
				setTimeout(function() {
					uni.stopPullDownRefresh()
				},2000)
			}
		}
	}
</script>

<style>
	.main-content {
		width: 100%;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 30rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	// 上线下线按钮样式
	.operateBtn {
		display: flex;
		flex-wrap: nowrap;
	}
	.hintInfo {
		display: flex;
		justify-content: center;
		color: #E0E0E0;
	}
</style>
